<template>
    <div class="chat-warp">
        <chat-topbar :isIcon="true" :text="heUser.nickname" rightIcon="gengduo" @onLeft="onLeft"></chat-topbar>
        <div class="list">
            <chat-item v-for="(item,index) in list" :data="item" :key="index" :heUser="heUser"></chat-item>
        </div>
        <chat-input @onSend="onSend" @showMap="showMap"></chat-input>
        <slot></slot>
    </div>
</template>

<script>
import ChatTopbar from '../Topbar/Index'
import ChatItem from './Item'
import ChatInput from './Input'
export default {
    name: 'ChatWarp',
    props: {
        list: {
            type: Array
        },
        heUser: {
            type: Object
        }
    },
    components: {
        ChatTopbar,
        ChatItem,
        ChatInput
    },
    methods: {
        onLeft() {
            var newObj = {
                type: 'news',
                fromId: this.$store.state.userInfo.id,
                token: this.$store.state.userInfo.token
            }
            var newData = JSON.stringify(newObj);
            this.ws.send(newData);
            this.$store.commit('setChatList',[]);
            this.$store.commit('setHeUser',{});
            this.$router.back(-1);
        },
        onSend(e,i) {
            this.$emit('onSend',e,i)
        },
        showMap() {
            this.$emit('showMap')
        }
    },
    computed: {
        name() {
            return this.$store.state.heUser.nickname
        }
    },
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/theme.scss';
.chat-warp{
    width:100%;
    height:100%;
    padding:4.125rem 0.5rem 5rem 0.5rem;
    overflow: auto;
    @include background_color("background_color3");
}
</style>